<template>
  <div style="width:100vw;height:100vh;" class="study-center">
    <!-- <div class="study-header">
      <mt-header fixed title="办事指南">
        <router-link to="/" slot="left">
          <mt-button @click="backHome" icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>-->
    <div style="background-color:#ffffff;" class="study-body">
      <div class="bscroll" ref="thingsObj">
        <div :style="loadedDown ? 'padding-bottom:0;' : ''" class="bscroll-container">
          <div class="null-class"></div>
          <div class="default-page-box" v-show="thingsObj.length == 0">
            <div class="default-page">
              <div class="default-text">哎呀，空空如也!</div>
            </div>
          </div>
          <div class="class-box">
            <div v-for="(item,index) in thingsObj" :key="index" class="train-box">
              <div v-if="index==0" class="train-video-footer"></div>
              <div class="train-video-box">
                <div class="train-video-head row-flex">
                  <div style="background-color:#EF7F58;" class="vide-head-img">
                    <!-- <img src="@/assets/homePicture/userpicture.png" alt /> -->
                    <div class="iconfont iconqiwangzhiwei plan-icon"></div>
                  </div>
                  <div style="flex:1 0 auto;">
                    <div style="margin-bottom:10px;" class="vide-head-text1">{{item.workDescribe}}</div>
                    <!-- <div class="vide-head-text2">{{item.workDescribe}}</div> -->
                    <div style="justify-content:space-between;" class="row-flex">
                      <div class="vide-head-text3">上传时间：{{item.createTime}}</div>
                      <div @click="getMediaFromDing(item)">
                        <a style="color:#4787E4;">
                          <i style="margin-right:5px;" class="iconfont iconxiazai"></i>
                          <span>下载</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-show="loadingDown" style="padding:10px;text-align:center;">
            <mt-spinner type="snake"></mt-spinner>
          </div>
          <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
        </div>
      </div>
      <!-- <div slot="top" class="mint-loadmore-top">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <span v-show="topStatus === 'loading'">Loading...</span>
      </div>-->
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setTimeout } from "timers";
import { setText } from "../../untils/ddnavigate";
import { Dinpan } from "../../untils/dinpan";
export default {
  name: "Home",
  props: ["number"],
  data() {
    return {
      selectedTab: "Things",
      allLoaded: false,
      thingsObj: [],
      params: {
        type: "0", // ype类型    0人事制度1办事指南2外购外派
        page: 1,
        pageSize: 10,
        workType: "",
        deptName: ""
      },
      pageTotal: "",
      loadingDown: false,
      loadingUp: false,
      loadedDown: false
    };
  },
  computed: {
    src: function() {
      return require("@/assets/studyCenter/study-apply.png");
    }
  },
  mounted() {
    setText("人事制度");
    let { params } = this;
    this.$post("qryHandleAffairsList", params).then(res => {
      if (res.success) {
        this.thingsObj = res.data.handleAffairs;
        this.pageTotal = res.data.totals;
      }
      this.initScroll("thingsObj");
    });
  },
  methods: {
    handleTopChange(status) {
      console.log(status);
      this.topStatus = status;
    },
    getMediaFromDing(params) {
      Dinpan.getMediaFromDing(params, this);
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.classFunction(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    },
    classFunction(params) {
      let that = this;
      this.$post("qryHandleAffairsList", params).then(res => {
        if (res.success) {
          that.thingsObj = that.thingsObj.concat(res.data.handleAffairs);
          that.loadingDown = false;
          that.loadingUp = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    // console.log(to, from);
    next();
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/study-center.less");
.bscroll-container{
  padding-bottom: 50px;
}
.home-tab-icon {
  padding-top: 2px !important;
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
</style>

